<template>
	<d2-container>
		<template>
			<div class="order-details-box">
				<div class="order-details-title">
					<h3>基本信息</h3>
				</div>

				<div class="order-details-info">
					<div class="info-item">订单编号</div>
					<div class="info-item">{{orderDetails.orderNo}}</div>

					<div class="info-item">下单门店</div>
					<div class="info-item">{{orderDetails.shopName}}</div>

					<div class="info-item">收银员</div>
					<div class="info-item">{{orderDetails.cashierName}}</div>

					<div class="info-item">下单时间</div>
					<div class="info-item">{{orderDetails.createTime | dayFilter}}</div>

					<!-- <div class="info-item">门店编码</div>
					<div class="info-item">{{orderDetails.shopNo}}</div> -->

					<div class="info-item">订单渠道</div>
					<div class="info-item">
						<template v-if="orderDetails.channelType == 1">门店订单</template>
						<template v-if="orderDetails.channelType == 2">美团订单</template>
						<template v-if="orderDetails.channelType == 3">抖音订单</template>
					</div>

					<div class="info-item">订单状态</div>
					<div class="info-item">
						<template v-if="orderDetails.orderStatus == 1">待付款</template>
						<template v-else-if="orderDetails.orderStatus == 2">已付款</template>
						<template v-else-if="orderDetails.orderStatus == 3">已取消</template>
						<template v-else>-</template>
					</div>

					<template v-if="isShowMoreDetails">
						<div class="info-item">退款状态</div>
						<div class="info-item">
							<template v-if="orderDetails.afterSalesStatus">
								<template v-if="orderDetails.afterSalesStatus == 0">无售后</template>
								<template v-if="orderDetails.afterSalesStatus == 1">部分退款中</template>
								<template v-if="orderDetails.afterSalesStatus == 2">全部退款中</template>
								<template v-if="orderDetails.afterSalesStatus == 3">已部分退款</template>
								<template v-if="orderDetails.afterSalesStatus == 4">已全部退款</template>
								<template v-if="orderDetails.afterSalesStatus == 5">取消退款</template>
							</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">支付方式</div>
						<div class="info-item">
							<template v-if="orderDetails.payType == 1">账户支付</template>
							<template v-else-if="orderDetails.payType == 2">现金支付</template>
							<template v-else-if="orderDetails.payType == 3">
								通联支付
								<template v-if="orderDetails.payTypeSub == 3">- 支付宝</template>
								<template v-if="orderDetails.payTypeSub == 4">- 微信</template>
								<template v-if="orderDetails.payTypeSub == 5">- 银联</template>
							</template>
							<template v-else-if="orderDetails.payType == 4">支付宝记账</template>
							<template v-else-if="orderDetails.payType == 5">微信记账</template>
							<template v-else>-</template>
						</div>

						<template  v-if="orderDetails.payType == 3">
							<div class="info-item">通联订单号</div>
							<div class="info-item">{{orderDetails.allinpayOrderNo}}</div>

							<div class="info-item">通联交易流水号</div>
							<div class="info-item">{{orderDetails.transactionId}}</div>
						</template>

						<div class="info-item">餐品金额</div>
						<div class="info-item">{{orderDetails.orderAmount | moneyFilter}}</div>

						<div class="info-item">赠餐金额</div>
						<div class="info-item">
							<template v-if="orderDetails.giftAmount">-{{orderDetails.giftAmount | moneyFilter}}</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">套餐已付</div>
						<div class="info-item">
							<template v-if="orderDetails.thirdPaidAmount">
								-{{orderDetails.thirdPaidAmount | moneyFilter}}
							</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">应收金额</div>
						<div class="info-item">{{orderDetails.payableAmount | moneyFilter}}</div>

						<div class="info-item">减免金额</div>
						<div class="info-item">
							<template v-if="orderDetails.reduceAmount">
								-{{orderDetails.reduceAmount | moneyFilter}}
							</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">实收金额</div>
						<div class="info-item">{{orderDetails.payAmount | moneyFilter}}</div>

						<div class="info-item">返现金额</div>
						<div class="info-item">
							<template v-if="orderDetails.cashBackAmount">{{orderDetails.cashBackAmount | moneyFilter}}</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">找零金额</div>
						<div class="info-item">
							<template v-if="orderDetails.payType == 2 && orderDetails.changeAmount">-{{orderDetails.changeAmount | moneyFilter}}</template>
							<template v-else-if="orderDetails.payType == 2">{{orderDetails.changeAmount | moneyFilter}}</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">实际补差金额</div>
						<div class="info-item">
							<template v-if="orderDetails.diffAmountPay">{{orderDetails.diffAmountPay | moneyFilter}}</template>
							<template v-else>-</template>
						</div>

						<div class="info-item">退款金额</div>
						<div class="info-item">
							<template v-if="orderDetails.refundAmount">{{orderDetails.refundAmount | moneyFilter}}</template>
							<template v-else>-</template>
						</div>

						<!-- <div class="info-item">小票打印时间</div>
						<div class="info-item">
							<template v-if="orderDetails.printTime">{{orderDetails.printTime}}</template>
							<template v-else>-</template>
						</div> -->

						<!-- <div class="info-item">取餐码</div>
						<div class="info-item">{{orderDetails.queueNo}}</div> -->

						<!-- 项目为单数时，用来占位 -->
						<!-- <div class="info-item"></div>
						<div class="info-item"></div> -->
					</template>

					<div class="view-more-details" @click="isShowMoreDetails = !isShowMoreDetails">
						<div class="folder-btn">
							<template v-if="isShowMoreDetails">
								<span>收起更多</span>
								<i class="el-icon-arrow-up"></i>
							</template>
							<template v-else>
								<span>展开更多</span>
								<i class="el-icon-arrow-down"></i>
							</template>
						</div>
					</div>
				</div>

				<div class="order-details-title">
					<h3>餐品信息</h3>
				</div>

				<el-table border :data="tableData" show-summary :summary-method="getSummaries" :span-method="arraySpanMethod" :row-class-name="tableStripeStyle" style="width: 100%">
					<el-table-column label="序号" prop="groupNo" width="50" align="center"></el-table-column>

					<el-table-column label="餐品名称" prop="productName">
						<template slot-scope="scope">
							<template>{{scope.row.channelType == 2 ? '【美团】' : scope.row.channelType == 3 ? '【抖音】': scope.row.isGift ? '【赠】' : ''}}</template>{{scope.row.productName}}
						</template>
					</el-table-column>
					<el-table-column label="规格" prop="productSkuName">
						<template slot-scope="scope">
							{{scope.row.productSkuName ? scope.row.productSkuName : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="做法" prop="methodValues">
						<template slot-scope="scope">
							{{scope.row.methodValues ? scope.row.methodValues : '-' }}
						</template>
					</el-table-column>

					<el-table-column label="餐品状态" align="center" width="100">
						<!-- <template slot-scope="scope">

						</template> -->
					</el-table-column>

					<el-table-column label="数量" prop="quantity" align="center"></el-table-column>
					<el-table-column label="单价" prop="price" align="center" width="90">
						<template slot-scope="scope">
							{{scope.row.price}}
						</template>
					</el-table-column>
					<el-table-column label="小计" prop="orderAmount" align="center" width="90">
						<template slot-scope="scope">
							{{scope.row.orderAmount}}
						</template>
					</el-table-column>

					<el-table-column label="赠送金额" prop="orderAmount" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.isGift">
								{{scope.row.orderAmount}}
							</template>
							<template v-else>-</template>
						</template>
					</el-table-column>
					<el-table-column label="返现金额" prop="cashBackAmount" align="center" width="90">
						<template slot-scope="scope">
							{{scope.row.cashBackAmount | moneyFilter}}
						</template>
					</el-table-column>

					<el-table-column label="退餐数量" prop="quantityRefunded" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.quantityRefundedCurrent > 0">
								{{scope.row.quantityRefundedCurrent}}
								<el-tooltip effect="light" :content="'退餐理由：'+ scope.row.exchangeReason" placement="top" v-if="scope.row.exchangeReason">
									<i class="el-icon-document-copy"></i>
								</el-tooltip>
							</template>
							<template v-else-if="scope.row.exchangeStatus == 2">
								{{scope.row.quantityRefunded}}
								<el-tooltip effect="light" :content="'退餐理由：'+scope.row.exchangeReason" placement="top" v-if="scope.row.exchangeReason">
									<i class="el-icon-document-copy"></i>
								</el-tooltip>
							</template>
							<template v-else>-</template>
						</template>
					</el-table-column>
					<el-table-column label="退款金额" prop="refundAmount" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.exchangeStatus == 1">
								{{scope.row.refundAmountCurrent}}
							</template>
							<template v-else-if="scope.row.exchangeStatus == 2">
								{{scope.row.refundAmount}}
							</template>
							<template v-else>-</template>
						</template>
					</el-table-column>
					<el-table-column label="补差金额" prop="diffAmount" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.exchangeStatus == 3">
								{{scope.row.diffAmountCurrent}}
							</template>
							<template v-else-if="scope.row.exchangeStatus == 4">
								{{scope.row.diffAmount}}
							</template>
							<template v-else>-</template>
						</template>
					</el-table-column>
					<el-table-column label="退/换" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.exchangeStatus == 1 && scope.row.quantityRefundedCurrent < scope.row.quantity">
							</template>
							<template v-else-if="scope.row.exchangeStatus == 1 && scope.row.quantityRefundedCurrent == scope.row.quantity">
							</template>
							<template v-else-if="scope.row.exchangeStatus == 2">已退款</template>
							<template v-else-if="scope.row.exchangeStatus == 3">待补差价</template>
							<template v-else-if="scope.row.exchangeStatus == 4">已补差价</template>
							<template v-else>-</template>
						</template>
					</el-table-column>

					<el-table-column label="备注" align="center" width="90">
						<template slot-scope="scope">
							<template v-if="scope.row.categoryTypeSub == 1 || scope.row.categoryTypeSub == 2">-</template>
							<template v-else>
								{{scope.row.dineWay == 1 ? '堂食' : scope.row.dineWay == 2 ? '外带(袋)' : '外带(盒)'}}
							</template>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</template>
	</d2-container>
</template>

<script>
import dayjs from 'dayjs'
import { findOrderDetail } from '@api/restaurant/merchant/order'
export default {
  data () {
    return {
      orderId: '',
      orderDetails: {},
      isShowMoreDetails: false,

	  tableData: []
    }
  },

  filters: {
	  dayFilter (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	  },
  	  moneyFilter (value) {
  		  if (value == '' || value == null || value == undefined) {
  		  	return '0.00'
  		  } else if (value == 0) {
  		  	return '0.00'
  		  } else {
  		  	let newVal = parseFloat(value)
  		  	if (newVal < 0) {
  		  		value = (-1 * parseFloat((value + '').replace(/[^\d\.-]/g, ''))).toFixed(2) + ''
  		  	} else {
  		  		value = parseFloat((value + '').replace(/[^\d\.-]/g, '')).toFixed(2) + ''
  		  	}

  		  	let left = value.split('.')[0].split('').reverse()
  		  	let right = value.split('.')[1]

  		  	let t = ''
  		  	for (let i = 0; i < left.length; i++) {
  		  		t += left[i] + ((i + 1) % 3 === 0 && (i + 1) !== left.length ? ',' : '')
  		  	}

  		  	if (newVal < 0) {
  		  		return '-' + t.split('').reverse().join('') + '.' + right
  		  	} else {
  		  		return t.split('').reverse().join('') + '.' + right
  		  	}
  		  }
  	  }
  },
  methods: {
	  fetchData () {
		  findOrderDetail({ orderId: this.orderId })
        .then(res => {
          this.orderDetails = res.data
		  this.tableData = res.data.shopOrderDetailVoList

		  this.getSpanArr(this.tableData) // 处理需要合并的单元格
        })
	  },
	  getSpanArr (data) { // 处理需要合并的单元格
	  	this.spanArr = [] // 合并单元格标识数组

	  	for (var i = 0; i < data.length; i++) {
	  		if (i === 0) {
	  			this.spanArr.push(1)
	  			this.pos = 0
	  		} else {
	  			// 判断当前元素与上一个元素是否相同
	  			if (data[i].groupNo === data[i - 1].groupNo) {
	  				this.spanArr[this.pos] += 1
	  				this.spanArr.push(0)

	  				if (this.tableData[i].categoryType == 1 && this.tableData[i].categoryType == this.tableData[i - 1].categoryType) {
	  					// 判断一碗里面有几碗主食，就餐方式以最新的主食为准
	  					this.tableData[i - 1].dineWay = this.tableData[i].dineWay
	  				}
	  			} else {
	  				this.spanArr.push(1)
	  				this.pos = i
	  			}
	  		}
	  		// console.log(this.spanArr);
	  	}
	  },
	  arraySpanMethod ({ rowIndex, columnIndex }) { // 合并同一订单的单元格
	  	if (columnIndex == 0 || columnIndex == 14) {
	  		const _row = this.spanArr[rowIndex]
	  		const _col = _row > 0 ? 1 : 0
	  		return {
	  			// [0,0] 表示这一行不显示， [2,1]表示行的合并数
	  			rowspan: _row,
	  			colspan: _col
	  		}
	  	}
	  },
	  tableStripeStyle ({ row }) { // 表格背景颜色
	  	// 按碗标颜色
	  	if (row.groupNo % 2 == 0) {
	  		return 'stripe'
	  	}
	  },

	  getSummaries (param) { // 表格小计
	  	const { columns, data } = param
	  	const sums = []
	  	columns.forEach((column, index) => {
	  		if (index === 4) {
	  			sums[index] = '小计'
	  			return
	  		}

	  		const values = data.map(item => Number(item[column.property]))
	  		if (!values.every(value => isNaN(value))) {
	  			if (index == 5) {
	  				// 5数量
	  				sums[index] = values.reduce((prev, curr) => {
	  					const value = Number(curr)
	  					if (!isNaN(value)) {
	  						return prev + curr
	  					} else {
	  						return prev
	  					}
	  				}, 0)

	  				if (sums[index] == 0) {
	  					sums[index] = ''
	  				}
	  			} else if (index == 6 || index == 7 || index == 9) {
	  				// 6单价 7小计 9返现
	  				sums[index] = values.reduce((prev, curr) => {
	  					const value = Number(curr)
	  					if (!isNaN(value)) {
	  						return prev + curr
	  					} else {
	  						return prev
	  					}
	  				}, 0)
	  				if (sums[index]) {
	  					sums[index] = Number(sums[index]).toFixed(2)
	  				} else {
	  					sums[index] = ''
	  				}
	  			} else if (index == 8) {
	  				// 8赠送金额
	  				let num = 0
	  				this.tableData.forEach(item => {
	  					if (item.isGift) {
	  						num = num + item.orderAmount
	  					}
	  				})
	  				if (num) {
	  					sums[index] = Number(num).toFixed(2)
	  				} else {
	  					sums[index] = ''
	  				}
	  			} else if (index == 10) {
	  				// 10退餐数量
	  				let num = 0
	  				this.tableData.forEach(item => {
	  					if (item.quantityRefundedCurrent > 0) {
	  						num = num + item.quantityRefundedCurrent
	  					} else if (item.exchangeStatus == 2) {
	  						num = num + item.quantityRefunded
	  					}
	  				})
	  				if (num) {
	  					sums[index] = num
	  				} else {
	  					sums[index] = ''
	  				}
	  			} else if (index == 11) {
	  				// 11退款金额
	  				let num = 0
	  				let length = 0 // 是否有退款项目
	  				this.tableData.forEach(item => {
	  					if (item.quantityRefundedCurrent > 0) {
	  						num = num + item.refundAmountCurrent
	  						length++
	  					} else if (item.exchangeStatus == 2) {
	  						num = num + item.refundAmount
	  						length++
	  					}
	  				})
	  				if (length) {
	  					sums[index] = Number(num).toFixed(2)
	  				} else {
	  					sums[index] = ''
	  				}
	  			} else if (index == 12) {
	  				// 12补差金额
	  				let num = 0
	  				let length = 0 // 是否有补差项目
	  				this.tableData.forEach(item => {
	  					if (item.exchangeStatus == 3) {
	  						num = num + item.diffAmountCurrent
	  						length++
	  					} else if (item.exchangeStatus == 4) {
	  						num = num + item.diffAmount
	  						length++
	  					}
	  				})
	  				if (length) {
	  					sums[index] = Number(num).toFixed(2)
	  				} else {
	  					sums[index] = ''
	  				}
	  			}
	  		} else {
	  			sums[index] = ''
	  		}
	  	})

	  	return sums
	  }
  },
  mounted () {
	  this.orderId = this.$route.query.id
	  this.fetchData()
  }
}
</script>

<style lang="scss" scoped>
	.order-details-box {
		width: 100%;

		.order-details-title {
			width: 100%;
			align-items: center;
			display: flex;
			padding: 10px 20px;

			h3 {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}
		}

		.order-details-info {
			width: 100%;
			flex-wrap: wrap;
			display: flex;
			position: relative;
			padding-bottom: 33px;
			margin-top: 6px;

			.info-item {
				flex: 0 0 25%;
				height: 42px;
				font-size: 14px;
				color: #333;
				border-bottom: #ededed 1px solid;
				border-right: #ededed 1px solid;
				align-items: center;
				justify-content: center;
				display: flex;

				&:nth-child(2n-1) {
					color: #999;
					background: #f5f5f5;
				}

				&:nth-child(4n-3) {
					border-left: #ededed 1px solid;
				}
				&:nth-child(1) {
					border-top: #ededed 1px solid;
				}
				&:nth-child(2) {
					border-top: #ededed 1px solid;
				}
				&:nth-child(3) {
					border-top: #ededed 1px solid;
				}
				&:nth-child(4) {
					border-top: #ededed 1px solid;
				}
			}
		}

		.view-more-details {
			align-items: center;
			justify-content: center;
			display: flex;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;

			.folder-btn {
				width: 120px;
				height: 34px;
				background: #fff;
				border: #ededed 1px solid;
				border-top: none;
				align-items: center;
				justify-content: center;
				display: flex;
				cursor: pointer;
				z-index: 2;
				span {
					font-size: 14px;
					color: #999;
				}
				i {
					font-size: 16px;
					color: #999;
					margin-left: 3px;
				}
			}
		}
	}
	.el-table {
		::v-deep .el-table__body {
			tr.stripe {
				background: #fafafa;
			}
		}
	}
</style>
